<template>
	<view class="input-box" :style="{bottom: keybordHeight + 'px'}">
		<view class="text-area-box">
			<textarea 
				maxlength="-1"
				fixed
				placeholder="请输入问题" 
				@keyboardheightchange="onKeyboardheightchange"
			    @linechange="onLineChange"
				@input="onInput"
				:style="{height: textareaHeihgt + 'px'}"
				confirm-type="send"
				confirm-hold
				:value="value"
				:show-confirm-bar="false"
			/>
		</view>
		<button hover-class="send-btn-hover" class="send-btn" @click="onSend">发送</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const defHeight = 0;
	const minHeight = 30
	const maxHeight = 60
	
	const emits = defineEmits(['send'])
	
	const keybordHeight = ref(defHeight)
	const value = ref('')
	const textareaHeihgt = ref(minHeight)

	
	function onKeyboardheightchange(event) {
		keybordHeight.value = event.detail.height < defHeight ? defHeight : event.detail.height
	}
	
	function onLineChange(event) {
	   textareaHeihgt.value = Math.min(Math.max(event.detail.height, minHeight), maxHeight)
	}
	
	function onInput(event) {
		value.value = event.detail.value
	}
	
	function onSend() {
		emits('send', value.value)
		
		value.value = ''
	}
</script>

<style lang="scss">
	.input-box {
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 0;
		background-color: rgb(237, 237, 237);
		padding: 20upx 10upx 10upx 10upx;
		border-top: 1upx solid #ddd;
		z-index: 100;
		
		.text-area-box {
			// border: 1upx solid #D7D9E0;
			background-color: #fff;
			border-radius: 4px 4px 0 0;
			flex: 1;
			display: flex;
			overflow: hidden;
			
			textarea {
				flex: 1;
				padding: 10upx;
			}
		}

		.send-btn {
			background-color: #EB7140;
			border-radius: 4px;
			color: #fff;
			align-items: center;
			height: 80upx;
			line-height: 80upx;
			margin-left: 10upx;
		}
		
		.send-btn-hover {
			background-color: rgba(235, 113, 64, 0.5);
		}
	}
</style>